<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<title>冒险起源</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-3.7.1.min.js" type="text/javascript"></script>
<script src="js/custom.js" type="text/javascript"></script>
</head>
<body style="background: url(images/mem_share_bg.png) top no-repeat; background-size:100%;">
<!--header-->
<div class="header header_fff">
	<div class="header_bar"></div>
    <div class="header_box x_start_end y_center" >
        <div class="left">
            <a href="javascript:;" class="p0_10 y_center"><i class="m_icon prev"></i></a>
        </div>
        <div class="center t_ellipsis_1">福利活动</div>
        <div class="right"></div>
    </div>
</div>
<!--tit-->
<div class="mem_share_tit">
	<p>— 组队打团，泰拉车上7713 —</p>
    <h3>分享邀请好友 免费领取优惠券</h3>
</div>
<!--info-->
<div class="mem_share_info">
	<div class="num_box">
    	<div class="li_box x_start_end y_center">
            <div class="y_end">
                <h3>甲板券</h3>
                <em>*3张</em>
            </div>
            <div class="btn_ma show_pop_share">查看邀请码→</div>
        </div>
        <div class="clear_h5 border_b fenge"></div>
        <div class="li_box y_center">
            <p class="t_ellipsis_1">邀请人数：50</p>
            <p class="t_ellipsis_1">可用甲板券：8</p>
            <p class="y_center show_pop_huodongguize"><i class="m_icon guize mr5"></i>活动规则</p>
        </div>
    </div>

</div>
<!--list-->
<div class="mem_share_list">
	<div class="tab_nav x_center y_center">
        <div class="tab_nav_li on">
            <span>已邀请玩家</span>
        </div>
        <div class="tab_nav_li">
            <span>甲板劵记录</span>
        </div>
    </div>
    <div class="tab_con">
        <div class="tab_con_li mem_exchange">
            <!--<div class="li_box x_start_end border_b">
                <div class="left x_start">
                    <div class="info y_center">
                        <img src="images/user_face/user_face_01.png" />
                        <p class="con">玩家123456</p>
                    </div>
                </div>
                <div class="right y_center">
                    <p class="color_999">2025-07-31 10:30</p>
                </div>
            </div>-->
            <div class="li_box">
                <p class="color_ccc fs12 ta_c p10">—— 暂无邀请记录 ——</p>
            </div>
            
        </div>
        <div class="tab_con_li mem_exchange">
            <div class="li_box x_start_end border_b">
                <div class="left x_start">
                    <div class="info">
                        <p class="con">攻坚·奥兹玛丨甲板</p>
                        <p class="time">2025-07-31 10:30</p>
                    </div>
                </div>
                <div class="right y_center">
                    <p class="pri">-1</p>
                </div>
            </div>
            <div class="li_box x_start_end border_b">
                <div class="left x_start">
                    <div class="info">
                        <p class="con">邀请好友丨玩家123456</p>
                        <p class="time">2025-07-31 10:30</p>
                    </div>
                </div>
                <div class="right y_center">
                    <p class="pri">+1</p>
                </div>
            </div>
            
        </div>
    </div>

</div>
    
<!--footer-->
<div class="footer">
    <div class="foot_tabbar_empty"></div>
    <div class="foot_tabbar border_t x_pad_start_end">
        <a href="task_index.html" class="li_box home">
            <i class="icon"></i>
            <p>组队大厅</p>
        </a>
        <a href="mem_team.html" class="li_box team">
            <i class="icon"></i>
            <p>组队记录</p>
        </a>
        <a href="mem_share.html" class="li_box activity on">
            <i class="icon"></i>
            <p>福利活动</p>
        </a>
        <a href="mem_index.html" class="li_box member">
            <i class="icon"></i>
            <p>个人中心</p>
        </a>
    </div>
</div>

<!--弹窗，分享-->
<div class="js_dialog js_dialog_share">
	<div class="pop_box pop_share_box">
        <div class="pop_tit y_center">
        	<h3></h3>
            <i class="m_icon pop_close pop_share_close"></i>
        </div>
        <div class="con_box">
            <div class="user_face"><img src="images/user_face/user_face_01.png" /></div>
            <h3 class="name">玩家123456</h3>
            <p class="text">【DNF手游】组队打团，泰拉车上7713</p>
            <div class="erweima"><img src="images/erweima.png" /></div>
            <div class="logo"><img src="images/logo.png" /></div>
            <div class="clear_h20"></div>
        </div>
        <div class="btn_sub y_center">
            <div class="x_start_end w_percent_100">
                <a href="javascript:;" class="btn btn_oline btnc_fff">保存图片</a>
                <a href="javascript:;" class="btn btn_bg btnc_0b8" style="flex:2">马上邀请好友</a>
            </div>
        </div>
    </div>
</div>

<!--弹窗，活动规则-->
<div class="js_dialog js_dialog_huodongguize">
	<div class="pop_box pop_down_box pop_iframe_box pop_huodongguize_box">
        <div class="pop_tit y_center border_b">
        	<h3>活动规则</h3>
            <i class="m_icon pop_close pop_huodongguize_close"></i>
        </div>
        <div class="con_box">
            <iframe src="page_news_huodong.html" class="page_iframe"></iframe>
        </div>
        <div class="clear_h10"></div>
        
    </div>
</div>

<script>
$().ready(function(e) {
	//mem_share_list滚动
	$(".mem_share_list .tab_con").outerHeight($(window).height()-$(".header").outerHeight(true)-$(".mem_share_tit").outerHeight(true)-$(".mem_share_info").outerHeight(true)-$(".mem_share_list .tab_nav").outerHeight(true)-$(".footer").outerHeight(true));
	
	//弹窗，分享
	pop_box_c({
		show_btn:".show_pop_share",
		zz:".js_dialog_share",
		box:".pop_share_box",
		close:".pop_share_close",
		body_close:true
	});
	
	//弹窗，活动规则
	pop_box_c({
		show_btn:".show_pop_huodongguize",
		zz:".js_dialog_huodongguize",
		box:".pop_huodongguize_box",
		close:".pop_huodongguize_close",
		body_close:true
	});
	
	//tab切换
	$(".tab_nav").each(function() {
        var tab_eq=$(this).find(".tab_nav_li.on").index();
		$(this).siblings(".tab_con").find(".tab_con_li").eq(tab_eq).addClass("on").siblings().removeClass("on");
    });
	$(".tab_nav .tab_nav_li").click(function(){
		
		$(this).addClass("on").siblings().removeClass("on");
		var tab_eq=$(this).index();
		$(this).parents(".tab_nav").siblings(".tab_con").find(".tab_con_li").eq(tab_eq).addClass("on").siblings().removeClass("on");
	});
	
});
</script>
</body>
</html>
